<template>
  <view>
    <scroll-view scroll-y class="scroll_album" @scrolltolower="handleToLower()">
      <view class="swiper_wrap">
        <swiper autoplay indicator-dots circular>
          <swiper-item v-for="item in Banner" :key="item.id">
            <!-- <view class="swiper-item {{item}}"></view> -->
            <img :src="item.new_thumb" />
          </swiper-item>
        </swiper>
      </view>

      <!-- <view class="album_list">
        <navigator
          class="album_wrap"
          v-for="itemA in Album"
          :key="itemA.id"
          :url="`/pages/detail?id=${itemA.id}`"
        >
          <view class="al_img">
            <img :src="itemA.cover" />
          </view>
          <view class="al_text">
            <p>{{ itemA.name }}</p>
            <p>{{ itemA.desc }}</p>
          </view>
        </navigator>
      </view> -->

      <view class="download_wrap">
        <button type="primary" @click="download">下载</button>
        <button type="default" @click="upload">上传</button>
        <button type="default" open-type="share">转发</button>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      Banner: [],
      Album: [],
      BannerParams: {
        limit: 30,
        order: "new",
        skip: 0,
      },
      hasMore: true,
    };
  },
  created() {
    this.getBannerList();
  },
  mounted() {
    uni.setNavigationBarTitle({ title: "专辑" });
    // this.getBannerList()
  },
  methods: {
    async download() {
      await uni.showLoading({
        title: "下载中",
      });

      const result1 = uni.downloadFile({
        url: "http://s.adesk.com/picasso/avatar_default.png",
        success: (res) => {
          console.log(res);
          const { tempFilePath } = res.tempFilePath;
          //   //   2 将小程序内存中的临时文件下载到本地上
          const result2 = uni.saveImageToPhotosAlbum({
            filePath: tempFilePath,
          });
          if (res.statusCode === 200) {
            console.log("下载成功");
          }
        },
      }); //下载文件的地址

      result1.onProgressUpdate((res) => {
        console.log("下载进度" + res.progress);
        console.log("已经下载的数据长度" + res.totalBytesWritten);
        console.log("预期需要下载的数据总长度" + res.totalBytesExpectedToWrite);

        // 测试条件，取消下载任务。
        if (res.progress > 50) {
          result1.abort();
        }
      });

      uni.hideLoading();
      await uni.showToast({
        title: "下载成功",
        // icon
      });
    },
    upload() {
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          const uploadTask = uni.uploadFile({
            url: "https://www.example.com/upload", //仅为示例，非真实的接口地址
            filePath: tempFilePaths[0],
            name: "file",
            formData: {
              user: "test",
            },
            success: (uploadFileRes) => {
              console.log(uploadFileRes.data);
            },
          });

          uploadTask.onProgressUpdate((res) => {
            console.log("上传进度" + res.progress);
            console.log("已经上传的数据长度" + res.totalBytesSent);
            console.log(
              "预期需要上传的数据总长度" + res.totalBytesExpectedToSend
            );

            // 测试条件，取消上传任务。
            if (res.progress > 50) {
              uploadTask.abort();
            }
          });
        },
      });
    },
    navigate() {
      uni.navigateTo({
        url: "pages/detail?id=${itemA.id}",
      });
    },
    getBannerList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
        data: this.BannerParams,
      }).then((res) => {
        this.Banner = res.res.banner;

        if (res.res.album.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有数据了",
            icon: "none",
          });
        } else {
          this.Album = [...this.Album, ...res.res.album];
        }

        console.log(this.Album);
      });
    },
    handleToLower() {
      if (this.hasMore) {
        this.BannerParams.skip += this.BannerParams.limit;
        this.getBannerList();
      } else {
        uni.showToast({
          title: "没有数据了",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss">
.scroll_album {
  height: calc(100vh - 36px);
}
.swiper_wrap {
  swiper {
    height: calc(750rpx / 2.3);
  }

  img {
    width: 100%;
    height: 100%;
  }
}
.album_list {
  .album_wrap {
    padding: 20px;
    display: flex;
    //   justify-content: space-around;
    .al_img {
      img {
        width: 100px;
        height: 100px;
      }
    }
    .al_text {
      font-size: 20px;
    }
  }
}
</style>